@use "../../../tokens";

.toolbar {
  height: tokens.$tab-bar-height;
  border-bottom: 1px solid tokens.$color-grey-20;
  display: flex;
  align-items: center;

  &.hasBackground {
    background: tokens.$color-white;
    box-shadow: tokens.$box-shadow-xs;
  }

  .start {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding-inline: tokens.$spacing-xl;
  }

  .end {
    padding-inline: tokens.$spacing-xl;
    display: flex;
    align-items: center;
    gap: tokens.$spacing-md;
  }

  @media screen and (max-width: tokens.$screen-md) {
    .start {
      justify-content: center;
    }

    .end {
      display: none;
    }
  }
}
